<template>
  <el-container>
    <el-header>
      <span class="logo">Dis</span>

      <el-menu
        background-color="#dd5138"
        text-color="#ffffff"
        active-text-color="white"
        mode="horizontal"
        :ellipsis="false"
      >
        <el-menu-item @click="jump('https://mis.movtile.com')">MIS</el-menu-item>
      </el-menu>
      <div class="profile" v-if="userInfo.info">
        {{ userInfo.info.username }}
      </div>
      <el-button type="info" @click="logout">退出登录</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          router
          :default-openeds="opens"
        >
          <template v-for="(menu, index) in menus" :key="index">
            <el-submenu :index="index.toString()" v-if="menu.children">
              <template #title>
                <span>{{ menu.title }}</span>
              </template>
              <el-menu-item
                v-for="(subMenu, subIndex) in menu.children.filter((child) => !child.hidden)"
                :key="subIndex"
                :index="subMenu.path.replace(/\:.*\?/, '').replace(ROTUE_PREFIX_LOCAL, '')"
              >
                {{ subMenu.title }}
              </el-menu-item>
            </el-submenu>
            <el-menu-item :index="menu.path" v-else :key="index">
              {{ menu.title }}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
  import { computed, getCurrentInstance, reactive, ref, watch } from 'vue';
  import { useStore } from 'vuex';
  import { routes } from '@router/index.js';
  import { ROUTE_PREFIX } from '@store/index.js';
  import { useRouter } from 'vue-router';

  const service = getCurrentInstance().appContext.config.globalProperties.$service;
  const activeIndex = ref('/');
  // 当前打开的菜单
  const opens = ref(['0']);
  const ROTUE_PREFIX_LOCAL = ref(ROUTE_PREFIX);
  const store = useStore();
  const router = useRouter();
  const userInfo = computed(() => store.getters.$userInfo);
  const menus = computed(() => store.getters.$menu);
  const setTokenUrl = `${window.location.origin}/settoken`;

  /**
   * 当路由变化之后,增加到路由列表中
   */
  watch(
    () => store.getters.$asyncRoute,
    () => {
      store.getters.$asyncRoute.forEach((route) => {
        router.addRoute(route);
      });
    },
  );

  watch(
    () => router.currentRoute.value.path,
    (val) => {
      activeIndex.value = val;
    },
  );

  const jump = (url) => {
    window.location.href = url;
  };

  const logout = () => {
    store.dispatch('$setToken', '');
    window.location.href = `${import.meta.env.VITE_LOGIN_SITE}logout?redirect=${encodeURIComponent(
      setTokenUrl,
    )}`;
  };

  service
    .AuthInfo()
    .then((res) => {
      store.dispatch('$setUserInfo', res.user);
      store.dispatch('$setMenus', res.menus);
      store.dispatch('$setPermission', res.permissions);
    })
    .catch((err) => {
      // 去登录啦
      window.location.href = `${import.meta.env.VITE_LOGIN_SITE}?redirect=${encodeURIComponent(
        setTokenUrl,
      )}`;
    });
</script>

<style lang="less">
  .el-header {
    background-color: #dd5138;
    color: white;
    display: flex;
    align-items: center;

    .logo {
      font-size: 86px;
      font-family: serif;
      font-weight: bolder;
    }

    .suffix {
      font-size: 20px;
      margin-left: 10px;
      vertical-align: text-bottom;
      margin-top: 20px;
    }

    .profile {
      margin-left: auto;
      margin-right: 10px;
      font-size: 14px;
    }

    .el-menu {
      margin-left: 40px;
      margin-top: 2px;
      font-size: 20px;
    }
  }

  .el-aside {
    background-color: #eeeeee;
    min-height: calc(100vh - 60px);
  }

  .el-menu {
    height: 100%;
  }
</style>
